<template>
    <div class="masterslave" v-if="master" slot="content">
        <page-title :title="master.title"></page-title>
        <article class="article">
            <div class="dt-header">
                <h2>{{master.title}}</h2>
                <p class="dt-info">
                    <span class="date">
                        <span>{{master.create_time}}</span>
                    </span>
                </p>
            </div>

        </article>
        <div class="ms-box" v-for="(item,index) in master.content" :key="index">
            <h3 class="ms-box-title" @click="openRichCtxDialog(item.richCtx)">{{index + 1}}. {{item.title}}</h3>
            <ul class="ms-box-list">
                <li v-for="(image,i) in item.images" :key="i" @click="openImgDialog(i, item.images)" class="ms-list-img">
                    <div class="ac-image" :style="{backgroundImage:'url(' + image.url.replace(/ /g,'%20')+'?imageMogr2/interlace/1/thumbnail/!200x150r/crop/200x150' + ')'}"></div>
                    <div class="name">
                        <b>{{image.name}}</b>
                    </div>
                    <span class="size">{{image.fileSize}}</span>
                    <span class="download">
                        <i class="iconfont icon-arrow-right"></i>
                    </span>
                </li>
                <li v-for="(acces,j) in item.accessory" :key="j" class="ms-list-acces">
                    <a :href="acces.url">
                        <div class="ac-icon">
                            <i v-if="acces.suffix.toLowerCase() == '.pdf'" class="iconfont icon-pdf"></i>
                            <i v-else-if="acces.suffix.toLowerCase() == '.doc' || acces.suffix.toLowerCase() == '.docx'" class="iconfont icon-word"></i>
                            <i v-else-if="acces.suffix.toLowerCase() == '.xls' || acces.suffix.toLowerCase() == '.xlsx'" class="iconfont icon-excel"></i>
                            <i v-else-if="acces.suffix.toLowerCase() == '.ppt' || acces.suffix.toLowerCase() == '.pptx'" class="iconfont icon-ppt"></i>
                            <i v-else-if="acces.suffix.toLowerCase() == '.ppt' || acces.suffix.toLowerCase() == '.pptx'" class="iconfont icon-ppt"></i>
                            <i v-else-if="acces.suffix.toLowerCase() == '.mp3' || acces.suffix.toLowerCase() == '.wma' || acces.suffix.toLowerCase() == '.wav'" class="iconfont icon-audio"></i>
                            <i v-else-if="acces.suffix.toLowerCase() == '.avi' || acces.suffix.toLowerCase() == '.rmvb' || acces.suffix.toLowerCase() == '.wma' || acces.suffix.toLowerCase() == '.wma' || acces.suffix.toLowerCase() == '.mp4'" class="iconfont icon-media"></i>
                            <i v-else class="iconfont icon-other-file"></i>
                        </div>
                        <span class="name">
                            {{acces.name}}
                        </span>
                        <span class="size">{{acces.fileSize}}</span>
                        <!-- <span class="download">
                            <i class="iconfont icon-download"></i>
                        </span> -->
                    </a>
                </li>
            </ul>
        </div>

        <div v-transfer-dom>
            <!-- v-if 为必要条件，否则会导致图片比例属性无效，无法计算出有效高度，导致页面空白 -->
            <x-dialog v-if="showXimg" v-model="showXimg" class="dialog-img" hide-on-blur @on-hide="hideXdialog">
                <div @click="hideXdialog" class="close">
                    <i class="iconfont icon-close"></i>
                </div>
                <swiper height="90%" v-model="showImg" :show-dots="false">
                    <swiper-item class="swiper-demo-img" v-for="(item, index) in showImgItem" :key="index">
                        <img :src="item.url">
                    </swiper-item>
                </swiper>

            </x-dialog>

            <x-dialog v-if="showXRichCtx" v-model="showXRichCtx" class="dialog-rich-ctx" hide-on-blur @on-hide="hideXdialog">
                <div class="rich-ctx-box">
                    <div class="rich-ctx" v-html="showRichCtx">
                    </div>
                </div>
                <div @click="hideXdialog" class="close">
                    <i class="iconfont icon-close"></i>
                </div>
            </x-dialog>
        </div>
    </div>
</template>

<script>
import { Swiper, SwiperItem, XDialog, TransferDomDirective as TransferDom } from 'vux';
import { getPacketById } from '@/api/packet';
export default {
    data() {
        return {
            // url:'http://ovhhwdcfb.bkt.clouddn.com/1511332643766_1000 (1)_20170116174858.jpg)',
            packetId: this.$route.query.packetId,
            showXimg: false,
            showImg: null,
            showImgItem: null,
            showXRichCtx: false,
            showRichCtx: null,
            showXAccessory: false,
            showAccessory: null,
            master: null,
        }
    },
    directives: {
        TransferDom
    },
    components: {
        Swiper,
        SwiperItem,
        XDialog
    },
    methods: {
        // 打开图片附件弹窗内容
        openImgDialog(i, array) {
            this.showXimg = true
            this.showImg = i
            this.showImgItem = array
            // document.body.style.overflow = 'hidden'
            // document.body.style.position = 'fixed'
        },
        // 打开标题内容弹窗
        openRichCtxDialog(content) {
            this.showXRichCtx = true
            this.showRichCtx = content
            // document.body.style.overflow = 'hidden'
            // document.body.style.position = 'fixed'
        },
        // openAccessoryDialog(url) {
        //     this.showXAccessory = true
        //     this.showAccessory = url
        //     console.log(url)
        // },
        // 关闭清空 弹窗链接内容。还原body滚动功能
        hideXdialog() {
            this.showXimg = false
            this.showImg = null
            this.showRichCtx = null
            this.showXRichCtx = false
            this.showAccessory = null
            // console.log(this.showRichCtx, this.showImg, this.showAccessory)
            // document.body.style.overflow = 'auto'
            // document.body.style.position = 'relative'
        },
        closeXimg() {
        }
    },
    mounted() {
        this.$nextTick(function () {
            getPacketById(this.packetId).then(res => {
                res.packet.content = ((JSON.parse(res.packet.content)).masterSlave)
                this.master = res.packet
            })
        })
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
